<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en"></meta>
  <title>OSM3S on Mapnik via Open Layers</title>
  <script src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
  <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script src="http://overpass-api.de/overpass.js"></script>
  <script type="text/javascript">
      var lat = 51.0;
      var lon = 10.5;
      var zoom = 6;
      var map;

      function init() {
          map = new OpenLayers.Map ("map", {
          controls:[
              new OpenLayers.Control.Navigation(),
              new OpenLayers.Control.PanZoomBar(),
              new OpenLayers.Control.LayerSwitcher(),
              new OpenLayers.Control.Attribution()],
              maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
              maxResolution: 156543.0399,
              numZoomLevels: 19,
              units: 'm',
              projection: new OpenLayers.Projection("EPSG:900913"),
              displayProjection: new OpenLayers.Projection("EPSG:4326")
          } );

          layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
          map.addLayer(layerMapnik);

          var lonLat = new OpenLayers.LonLat(lon, lat)
              .transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

          map.setCenter (lonLat, zoom);

	  var click = new OpenLayers.Control.Click(
	      "http://overpass-api.de/api/interpreter?data="
	          + "[out:popup(\"POIs\";[name][highway!~\".\"][railway!~\".\"][landuse!~\".\"][type!~\"route|network|associatedStreet\"][public_transport!~\".\"][route!~\"bus|ferry|railway|train|tram|trolleybus|subway|light_rail\"];\"name\";)(\"Streets\";[highway~\"primary|secondary|tertiary|residential|unclassified\"];\"name\";)(\"Public Transport Stops\";[name][highway~\"bus_stop|tram_stop\"];[name][railway~\"halt|station|tram_stop\"];\"name\";)(\"Public Transport Lines\";[route~\"bus|ferry|railway|train|tram|trolleybus|subway|light_rail|monorail\"];\"ref\";)];"
	          + "(node(bbox);way(bbox););(._;<;);out;"
		  + "&redirect=no&template=ids.popup", 0.00000005, map);

          map.addControl(click);
          click.activate();
      }
  </script>
</head>
<body onload="init()">
  <div id="map" class="smallmap"></div>

</body>
</html>


